<template>
  <view class="feedback-container">
    <view class="header">
      <text class="title">用户反馈</text>
      <text class="subtitle">请填写您的意见和建议</text>
    </view>

    <view class="form-container">
      <view class="form-item">
        <text class="label">用户ID</text>
        <input class="input" disabled v-model="formData.userId" placeholder="请先登录" placeholder-class="placeholder" />
      </view>

      <view class="form-item">
        <text class="label">宿舍号</text>
        <input class="input" v-model="formData.ss_mc" placeholder="请输入您的宿舍号" placeholder-class="placeholder" />
      </view>

      <view class="form-item">
        <text class="label">反馈内容</text>
        <textarea class="textarea" v-model="formData.msg" placeholder="请详细描述您的问题或建议" placeholder-class="placeholder"
          maxlength="500" />
        <text class="word-count">{{ formData.msg.length }}/500</text>
      </view>

      <button class="submit-btn" @click="submitForm">提交反馈</button>
    </view>
  </view>
</template>

<script>
  import {
    ajax
  } from '../../utils/request.js';
  export default {
    data() {
      return {
        formData: {
          userId: '',
          ss_mc: '',
          msg: ''
        }
      }
    },
    onLoad() {
      this.formData.userId = uni.getStorageSync('userInfo').id
      this.formData.ss_mc = uni.getStorageSync('userInfo').ss_mc
    },
    methods: {
      async submitForm() {
        // 表单验证
        if (!this.formData.userId) {
          uni.showToast({
            title: '请输入用户ID',
            icon: 'none'
          });
          return;
        }

        if (!this.formData.ss_mc) {
          uni.showToast({
            title: '请输入宿舍号',
            icon: 'none'
          });
          return;
        }

        if (!this.formData.msg) {
          uni.showToast({
            title: '请输入反馈内容',
            icon: 'none'
          });
          return;
        }

        if (this.formData.msg.length < 10) {
          uni.showToast({
            title: '反馈内容至少10个字',
            icon: 'none'
          });
          return;
        }

        try {
          // 显示加载中
          uni.showLoading({
            title: '提交中...'
          });

          // 这里替换为你的实际API接口
          const res = await ajax('/api/meter/opinionsubmit', 'POST', this.formData);

          // 提交成功后重置表单
          this.formData = {
            userId: this.formData.userId, // 保留用户ID
            ss_mc: this.formData.ss_mc, // 保留宿舍号
            msg: ''
          };

          uni.hideLoading();
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });

        } catch (error) {
          uni.hideLoading();
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none'
          });
          console.error('提交反馈失败:', error);
        }
      }
    }
  }
</script>

<style lang="scss">
  .feedback-container {
    padding: 30rpx;
    background-color: #f8f8f8;
    min-height: 100vh;
  }

  .header {
    margin-bottom: 40rpx;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }

    .subtitle {
      font-size: 28rpx;
      color: #999;
    }
  }

  .form-container {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  .form-item {
    margin-bottom: 40rpx;

    .label {
      font-size: 30rpx;
      color: #333;
      display: block;
      margin-bottom: 20rpx;
      font-weight: 500;
    }

    .input {
      height: 80rpx;
      border: 1rpx solid #eee;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      background-color: #f9f9f9;
    }

    .textarea {
      height: 200rpx;
      border: 1rpx solid #eee;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 28rpx;
      background-color: #f9f9f9;
      width: 100%;
      box-sizing: border-box;
    }

    .word-count {
      font-size: 24rpx;
      color: #999;
      text-align: right;
      display: block;
      margin-top: 10rpx;
    }
  }

  .placeholder {
    color: #ccc;
    font-size: 28rpx;
  }

  .submit-btn {
    background-color: #06AD56;
    color: #fff;
    border-radius: 8rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    margin-top: 20rpx;

    &:active {
      opacity: 0.8;
    }
  }
</style>